<template>
    <section>
        <div id='nightingale-chart' class="h-[650px] w-[650px]"></div>
    </section>
</template>

<script lang='ts' setup>
import * as echarts from "echarts";

type Props = {
    data: { name: string, value: string }[],
}

const props = withDefaults(defineProps<Props>(), {
    data: () => [],
});

const initChart = () => {
    const chartDom = document.getElementById('nightingale-chart');
    if (!chartDom) return
    const myChart = echarts.init(chartDom);
    let option;

    option = {
        legend: {
            top: 'top',
            textStyle: {
                color: '#fff',
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}￥ ({d}%)'
        },
        toolbox: {
            show: false,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: ['#12c2e9', '#c471ed', '#f64f59'],
        series: [
            {
                name: '销售占比',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                label: {
                    show: true,
                    color: '#fff',
                    textBorderColor: '#000',
                },
                data: props.data
            }
        ]
    };

    option && myChart.setOption(option);
}

setTimeout(() => {
    initChart()
}, 500)
</script>

<style lang='scss' scoped></style>